@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);

.frame{
    position:absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    border-radius: 2px;
    background-color: #2b3642;
    overflow: hidden;
    font-family: 'Open Sans' Arial, Helvetica, sans-serif;
}

.center{
    position: absolute;
    width: 320px;
    height: 240px;
    overflow: hidden;
    inset: 0;
    margin: auto;
    box-shadow:4px 8px 12px rgba(0,0,0,0.3);
    background-color: #fff;

    .top{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background-color: #3d4d5e;

    }

    input[type='radio']{
        display: none;
    }

    .tab{
        position: relative;
        float: left;
        z-index: 5;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 38px;
        color: #8398ad;
        cursor: pointer;
        font-size: 14px;
        background: inherit;
        transition: background .3s ease-in-out;

        &.search{
            float: right;
        }

        &:hover{
            background: #fff;
        }
    }

    input[type='radio']:checked + .tab{
        background: #5da2ed;
        color: #fff;
    }

    .content{
        position: absolute;
        top: 40px;
        color: #000;

        .box{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(3px);
            pointer-events: none;
            padding: 25px;
            transition: all .3s ease-in;

            h1{
                font-weight: 400;font-size: 16px;
                color: #415868;
                margin: 0;
                padding: 0;
            }

            p{
                margin: 17px 0;

                span{
                    display: block;
                    height: 4px;
                    background: #e9e9e9;
                    margin: 6px 0;
                }
            }
        }
    }
}

@for $i from 1 through 4{
    #tab-#{$i}:checked ~ .content #box-#{$i}{
        pointer-events: all;
        opacity: 1;
        transform: translateY(0);
        transition: all .5s ease-out .4s;
    }
}
